import { Button } from "antd";
import React, { useCallback } from "react";
import { useNavigate, useNavigationType, useParams } from "react-router";
import { useLastLocation } from "../components/LastLocationRecorder";

const DetailPage: React.FC = () => {
  const { key } = useParams();
  const navigate = useNavigate();
  const navigationType = useNavigationType();
  const lastLocation = useLastLocation();

  const back = useCallback(() => {
    const hasBackHistory =
      lastLocation &&
      lastLocation.key !== "default" &&
      navigationType !== "REPLACE";
    if (hasBackHistory) {
      navigate(-1);
    } else {
      navigate("/table", { replace: true });
    }
  }, []);

  return (
    <div>
      <Button onClick={back}>返回</Button>
      <div>Key:{key}</div>
    </div>
  );
};

export default DetailPage;
